<template>
    <div class="container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>直播管理</el-breadcrumb-item>
                <el-breadcrumb-item>企业微信直播</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;padding: 20px;background-color: #fff;">
            <div style="display: flex;align-items: center;justify-content: space-between;">
                <div>
                    <el-select v-model="isPush" placeholder="请选择" style="margin-right:20px;" @change="SelectList">
                        <el-option v-for="item in isSelectPush" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- 卖场：
                    <el-select v-model="marketId" clearable @change="selectMarket" filterable placeholder="请选择卖场">
                      <el-option
                        v-for="item in marketList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select> -->
                </div>
            </div>
            <div style="margin-top: 20px;">
                <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
                <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading">
                    <div slot="image" slot-scope="row, index">
                        <div style="width: 60px;height: 60px;overflow: hidden;" @click="LookImage(row)">
                            <img :src="row.path" v-if="row.path" style="width: 100%;height: 100%;">
                        </div>
                    </div>
                    <div slot="cate" slot-scope="row, index">
                        <el-tag v-for="(item,index) in row" style="margin: 0 4px;" :key="index">{{item.cate_name}}</el-tag>
                    </div>
                    <div slot="status" slot-scope="row, index">
                        <el-tag v-if="row == 0">预约中</el-tag>
                        <el-tag v-if="row == 1" type="success">直播中</el-tag>
                        <el-tag v-if="row == 2" type="info">已结束</el-tag>
                        <el-tag v-if="row == 3" type="warning">已过期</el-tag>
                        <el-tag v-if="row == 4" type="danger">已取消</el-tag>
                    </div>
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                            <el-button v-if="index.is_open == 1" size="mini" type="success" @click="IsOpenChangeNo(index)">取消发布</el-button>
                            <el-button v-else size="mini" type="primary" @click="IsOpenChangeYes(index)">发布</el-button>
                            <el-button size="mini" @click="EditItem(index)">编辑</el-button>
                        </div>
                    </div>
                </Table>
                <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
            </div>
        </div>
        <modal :title="MadalTitle" v-model="visible" :centered="true" :maskClosable="false" @ok="handleOk" @cancel="handleCancel">
            <div>
                <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="图片上传" prop="name">
                        <el-upload v-if="fileList.length <= 1" action="/api/client/base/uploadfile" list-type="picture-card" :on-preview="handlePictureCardPreview" ref="upload" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :auto-upload="true" limit="1" :on-exceed="handleExceed" :file-list="fileList" accept="image/jpeg, image/jpg, image/gif, image/png" multiple>
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" style="z-index: 0;" :modal="false">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        <p>展示在直播列表的图片</p>
                    </el-form-item>
                    <el-form-item label="直播分类" prop="name">
                        <el-select v-model="CateValue" placeholder="请选择分类" style="flex: 1;width: 300px;margin-left: 20px;" clearable multiple>
                            <el-option v-for="item in CateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否发布" prop="name">
                        <el-switch v-model="SwitchValue">
                        </el-switch>
                    </el-form-item>
                </el-form>
            </div>
        </modal>
        <modal v-model="LookPic" :centered="true" :maskClosable="true" :footer="null">
            <div style="padding: 24px;">
                <img :src="LookPicPath" style="width: 100%;height: 100%;">
            </div>
        </modal>
    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: 'dynamicList',
        components: {
            pagination,
            Table,
            modal
        },
        data() {
            return {
                listData: [],
                selectedRowKeys: [],
                total: 0, //定义初始有多少条数据
                page: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                MadalTitle: '',
                visible: false,
                fileList: [],
                dialogVisible: false,
                dialogImageUrl: "",
                SwitchValue: true,
                LookPic: false,
                LookPicPath: '',
                EditId: null,
                CateList: [],
                CateValue: [],
                isPush: 0,
                isSelectPush: [{
                        value: 0,
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '已发布'
                    },
                ],
                marketId:'',//卖场id
                marketList:[]
            };
        },
        computed: {
            ...mapState({
                listfields: state => state.Player.fields,
            }),
        },
        watch: {},
        created() {},
        mounted() {
            this.GetFields()
            this.getList()
            this.getCateList()
            this.remoteMethod()
        },
        methods: {
            // 获取卖场列表
            remoteMethod(){
              this.$http.post('/api/root/Market/marketList').then(res=>{
                console.log(res,'卖场列表');
                if(res.code==1){
                  this.marketList = res.data?res.data:[]
                }
              })
            },
            // 选择卖场
            selectMarket(){
              this.getList()
            },

            ...mapActions({
                GetFields: 'Player/GetFields',
            }),
            getCateList() {
                var that = this
                var params = {
                    keyword: '',
                    status: 1,
                    is_all: 1,
                    page: '',
                    pagesize: '',
                }
                that.$http.post('/api/root/qywx/Living/cateList', params).then(res => {
                    if (res.code === 1) {
                        console.log(res.data, "分类列表");
                        var data = res.data.list == null ? [] : res.data.list
                        if (data.length != 0) {
                            data.forEach((item, index) => {
                                item.value = item.cate_id
                                item.label = item.cate_name
                            })
                        }
                        that.CateList = data
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            LookImage(row) {
                // console.log(row);
                this.LookPicPath = row.path
                this.LookPic = true
            },
            handleCancel() {
                this.dialogVisible = false
                this.dialogImageUrl = ''
                this.fileList = []
                this.MadalTitle = ''
                this.SwitchValue = true
                this.EditId = null
                this.visible = false
            },
            addItem() {
                this.MadalTitle = '添加'
                this.visible = true
            },
            handleOk() {
                var that = this
                var params = {
                    id: that.EditId,
                    image: that.fileList.length != 0 ? that.fileList[0].response.data.id : [],
                    is_open: that.SwitchValue == true ? 1 : 0,
                    cate_ids: this.CateValue,
                }
                console.log(this.CateValue);
                if (that.fileList.length == 0) {
                    that.$message.error('请上传图片!')
                    return
                }
                if (this.CateValue.length != 0) {
                    // params.cate_ids.push(this.CateValue)
                    that.$http.post('/api/root/qywx/Living/update', params).then(res => {
                        if (res.code === 1) {
                            that.$message.success("修改成功")
                            this.getList()
                            this.handleCancel()
                        } else {
                            that.$message.error(res.msg)
                        }
                    }).catch(err => {
                        that.$message.error(err.msg ? err.msg : err.toString())
                    })
                } else {
                    that.$message.error('请选择直播分类')
                }
                // console.log(params);

            },
            IsOpenChangeNo(row) {
                var that = this
                var params = {
                    id: row.id,
                    // image: '',
                    is_open: 0,
                    cate_ids: [],
                }
                this.$confirm('确定取消发布?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    that.$http.post('/api/root/qywx/Living/update', params).then(res => {
                        if (res.code === 1) {
                            that.$message.success("取消发布成功")
                            this.getList()
                        } else {
                            that.$message.error(res.msg)
                        }
                    }).catch(err => {
                        that.$message.error(err.msg ? err.msg : err.toString())
                    })
                }).catch(() => {});
                // console.log(params);

            },
            IsOpenChangeYes(row) {
                var that = this
                var params = {
                    id: row.id,
                    // image: '',
                    is_open: 1,
                    cate_ids: [],
                }
                // console.log(params);
                that.$http.post('/api/root/qywx/Living/update', params).then(res => {
                    if (res.code === 1) {
                        that.$message.success("发布成功")
                        this.getList()
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            EditItem(row) {
                console.log(row);
                this.EditId = row.id
                this.MadalTitle = "编辑直播"
                // row.cate_list.map();
                this.CateValue = row.cate_list != null ? row.cate_list.map(item => item.cate_id) : []
                this.SwitchValue = row.is_open == 1 ? true : false
                var obj = {
                    response: {
                        data: {
                            id: row.image.id,
                            url: row.image.path
                        }
                    },
                    id: row.image.id,
                    url: row.image.path
                }
                if (row.image.id) {
                    this.fileList.push(obj);
                }
                this.visible = true
            },
            // 图片上传
            handleRemove(file, fileList) {
                this.fileList = fileList;
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制上传一张图片`);
            },
            handleAvatarSuccess(res, file, fileList) {
                this.fileList = fileList;
                // console.log(this.fileList, "上传图片");
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("上传商品图片大小不能超过 2MB!");
                }
                return isLt2M;
            },
            getHMS(time) {
                const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
                const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
                const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
                return hour + ':' + min + ':' + sec
            },
            SelectList() {
                this.getList()
            },
            getList() {
                var that = this
                var params = {
                    status: [],
                    is_open: that.isPush,
                    page: that.page,
                    pagesize: that.pagesize,
                    market_id:that.marketId
                }
                that.$http.post('/api/root/qywx/Living/getList', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res.data);
                        var data = res.data.list
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                item.key = item.id
                                // item.is_open = item.is_open == 1 ? '已发布' : '未发布'
                                item.living_duration = this.getHMS(item.living_duration)
                            })
                            that.total = res.data.count
                            that.listData = data
                            // console.log(res.data);
                        } else {
                            that.total = 0
                            that.listData = []
                        }
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.page = pageno;
                this.pagesize = pagesize;
                this.getList()
            },
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.page = current;
                this.pagesize = size;
                this.getList()
            },
            onSelectChange(selectedRowKeys) {
                // console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
        },
    };
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        background-color: #f5f5f5;
    }

    .table-breadcrumb {
        height: 6%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
</style>